<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../x-elements/x-toolbar.html">
<link rel="import" href="../../x-elements/x-overlay.html">
<link rel="import" href="../../x-elements/x-icon.html">
<link rel="import" href="../../x-elements/x-icon-button.html">
<link rel="import" href="../../x-elements/x-pages.html">
<link rel="import" href="../../x-elements/x-selector.html">
<link rel="import" href="../../x-elements/x-search-input.html">
<link rel="import" href="../../x-elements/x-drop-button.html">
<link rel="import" href="../../x-elements/paper-button.html">
<link rel="import" href="../../assets/icons.html">

<style>

  body {
    font-family: sans-serif;
  }

  x-icon-button {
    height: 38px;
  }

  #overlay {
    width: 500px;
    height: 200px;
    background-color: white;
    border: 1px outset silver;
    padding: 24px;
  }

  #overlay2 {
    width: 200px;
    height: 600px;
    background-color: white;
    border: 1px outset silver;
    padding: 24px;
  }

  #overlay3 {
    xwidth: 100px;
    background-color: white;
    border: 1px outset silver;
  }

  #overlay3 [selected] {
    background-color: lightblue;
  }

  #overlay3 h3 {
    padding: 8px 24px;
    margin: 0;
  }

  #overlay3 [tools] {
    padding: 4px;
  }

  paper-button {
    background-color: lightblue;
  }

  page {
    display: block;
  }

  #one {
    background-color: whitesmoke;
  }

  #two {
    background-color: #FFDCCA;
  }

  x-drop-button {
    xdisplay: block;
    border: 1px dotted silver;
    padding: 4px;
  }

</style>

<body fullbleed vertical layout>

<x-toolbar>
  <x-icon-button icon="menu"></x-icon-button>
  <h2>Hello World</h2>
  <x-search-input></x-search-input>
  <span flex></span>
  <x-icon-button icon="schedule" onclick="pages.selected = 1"></x-icon-button>
  <x-icon-button icon="settings" onclick="pages.selected = 0"></x-icon-button>
  <span flex five></span>
</x-toolbar>

<x-pages id="pages" flex scroll>

  <page id="one">

    <div style="height: 500px; padding: 16px;">
      <x-drop-button onclick="overlay3.open(this.getBoundingClientRect(), true);">Foo</x-drop-button>
    </div>

    <paper-button onclick="overlay.open();">Dialog</paper-button>
    <paper-button onclick="overlay3.open(this.getBoundingClientRect(), true);">Pop</paper-button>
    <div style="height: 2500px;"></div>

  </page>

  <page id="two">

    <br>
    <h2>Two</h2>
    <br>

  </page>

</x-pages>

<x-overlay id="overlay" vertical layout>

  <div horizontal end-justified layout>
    <paper-button onclick="overlay2.open();">Nest</paper-button>
  </div>
  <div flex></div>
  <div horizontal end-justified layout>
    <paper-button onclick="overlay.close();">Close</paper-button>
  </div>

</x-overlay>

<x-overlay id="overlay2" vertical layout>

  <div horizontal end-justified layout>
    <paper-button onclick="overlay3.open(this.getBoundingClientRect());">Nest 2</paper-button>
  </div>
  <div flex></div>
  <div horizontal end-justified layout>
    <paper-button onclick="overlay2.close();">Close</paper-button>
  </div>

</x-overlay>

<x-overlay id="overlay3" vertical layout>

  <x-selector block flex>
    <h3>Alpha</h3>
    <h3>Beta</h3>
    <h3>Gamma</h3>
  </x-selector>
  <div tools horizontal end-justified layout>
    <paper-button onclick="overlay3.close();">Close</paper-button>
  </div>

</x-overlay>

</body>
